<div class="flex-1 flex items-center dataset-validation-bg">
  <div class="container mx-auto pt-16 pb-16 w-full h-full flex flex-col">
    <div class="text-5xl font-bold" translate>
      datafeeder.datasetValidation.title
    </div>
    <div class="pb-4 pt-4">
      <ui-step-bar
        [steps]="numberOfSteps"
        [currentStep]="1"
        type="primary"
      ></ui-step-bar>
    </div>
    <div
      class="text-2xl font-bold"
      translate
      [translateParams]="{ number: numOfEntities }"
    >
      datafeeder.datasetValidation.datasetInformation
    </div>
    <div class="flex justify-between pb-10 pt-10 flex-1">
      <div class="w-1/2 h-full bg-white mr-20 rounded-md">
        <app-data-import-validation-map-panel
          [headerLabel]="'Here is a sample entity from the dataset'"
          [footerLabel]="'Encoding:'"
          [footerList]="encodingList"
          [footerValue]="encoding"
          [geoJson]="geoJSONData"
          [showProperties]="true"
          [padding]="[50, 300, 50, 50]"
          (propertyChange)="handleEncodingChange($event)"
          *ngIf="geoJSONData"
        ></app-data-import-validation-map-panel>
      </div>
      <div class="w-1/2 h-full bg-white rounded-md">
        <app-data-import-validation-map-panel
          [headerLabel]="'This is the extent of the dataset'"
          [footerLabel]="'Ref system:'"
          [footerList]="refSystem"
          [footerValue]="crs"
          [geoJson]="geoJSONBBox"
          [showProperties]="false"
          (propertyChange)="handleCrsChange($event)"
          *ngIf="geoJSONBBox"
        ></app-data-import-validation-map-panel>
      </div>
    </div>
    <div class="flex justify-end">
      <ui-button
        (click)="submitValidation()"
        type="primary"
        extraClass="rounded-full px-20"
      >
        <span class="uppercase text-white font-bold" translate>
          datafeeder.datasetValidation.submitButton
        </span>
      </ui-button>
    </div>
  </div>
</div>
